"use client";

import { useState, useEffect } from 'react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Sun, Cloud, CloudRain } from 'lucide-react';

const locations = [
  { name: "东京", weather: "sunny", icon: <Sun className="w-4 h-4 text-yellow-500" /> },
  { name: "京都", weather: "cloudy", icon: <Cloud className="w-4 h-4 text-gray-400" /> },
  { name: "大阪", weather: "rainy", icon: <CloudRain className="w-4 h-4 text-blue-400" /> },
];

export function WeatherWidget() {
  const [selectedWeather, setSelectedWeather] = useState("sunny");

  useEffect(() => {
    const htmlElement = document.documentElement;
    htmlElement.classList.remove("sunny", "cloudy", "rainy");
    if (selectedWeather === "cloudy") {
      htmlElement.classList.add("cloudy");
    } else if (selectedWeather === "rainy") {
      htmlElement.classList.add("rainy");
    }
  }, [selectedWeather]);
  
  const handleValueChange = (value: string) => {
    const location = locations.find(l => l.name === value);
    if (location) {
      setSelectedWeather(location.weather);
    }
  };

  const selectedLocation = locations.find(l => l.weather === selectedWeather);

  return (
    <Select onValueChange={handleValueChange} defaultValue="东京">
      <SelectTrigger className="w-[120px] bg-background/50 rounded-full">
        <div className="flex items-center gap-2">
           {selectedLocation?.icon}
          <SelectValue placeholder="选择地点" />
        </div>
      </SelectTrigger>
      <SelectContent>
        {locations.map((loc) => (
          <SelectItem key={loc.name} value={loc.name}>
            <div className="flex items-center gap-2">
              {loc.icon}
              <span>{loc.name}</span>
            </div>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}
